import React, {useState} from 'react';

function App(props) {
    /**
     * useState:让函数组件拥有状态
     * useState接收的值是状态的初始值,返回的是一个数组,下标1对应的元素是修改状态的方法。
     * useState可以调用多次（创建多个状态）
     * useState具有缓存的功能。如果不是初次挂载执行函数组件，那么状态的初始值为上一次修改以后的结果。
     * 类组件区别：
     *  类组件中通过this.setState更改装填,如果状态未发生改变,那么render不会执行
     *  函数组件中的状态值只有发生更改,那么才会重新render
     * 注意：修改数据必须通过set方法
     */
    let [num, setNum] = useState(0);
    let [arrState, setArrState] = useState([0, 1, 2]);
    return (
        <div>
            <h3>App</h3>
            <button onClick={() => {
                // setNum(num + 1);// 将当前的num状态值加1
                // console.log("num1: ", num)  // 0
                // setNum(num + 1);// 将当前的num状态值加1
                // console.log("num2: ", num)  // 0
                // setNum(num + 1);// 将当前的num状态值加1
                // console.log("num3: ", num)  // 0
                // setNum(num + 1);// 将当前的num状态值加1
                // console.log("num4: ", num)  // 0


                setNum(num++)
                console.log("num1: ", num)  // 0
                setNum(num++)
                console.log("num2: ", num)  // 1
                setNum(num++)
                console.log("num3: ", num)  // 2


                // 了解：setNum是异步操作,实时获取最新的状态值
                // setNum可以接收一个回调函数，回调函数返回的值即是修改状态的值
                // prevNum:是上一次要修改的状态值（但是状态还未修改）
                // setNum(9);// 准备将状态num,更新为9
                // setNum((prevNum) => {
                //     console.log(num, prevNum);// 0 9
                //     return 100;
                // })
                // setNum((prevNum) => {
                //     console.log(num, prevNum);// 0 100
                //     return 200;
                // })
                // setNum((prevNum) => {
                //     console.log(num, prevNum);// 0 200
                //     return 300;
                // })
            }}>{num}</button>
            <div>数组：{arrState}</div>
            <button onClick={() => {
                setArrState([...arrState, arrState.length])
            }}>改变数组
            </button>
        </div>
    );
}

export default App;